<template>
    <div class="actionSheet" @click="hideActionSheet()">
        <ul class="menu" :class="{active:isShowMenu}">
            <li v-for="(item,index) in actionSheetItems" :key="index" @click="itemClick(index)">{{item}}</li>
            <li>取消</li>
        </ul>
    </div> 
</template>

<script>    
import {mapGetters} from "vuex";
export default {
    name:"actionSheet",
    data(){
        return{
            isShowMenu:false
        }
    },
    mounted(){
        setTimeout(() => {
            this.isShowMenu=true;
        }, 100);
    },
    computed:{
        ...mapGetters(["actionSheetItems","actionSheetCallBack"])
    },
    methods:{
        itemClick(index){
            this.hideActionSheet();
            if(this.actionSheetCallBack){
                this.actionSheetCallBack(index);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .actionSheet{
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.3);
        .menu{
            position: absolute;
            bottom: 0px;
            width: 100%;
            left: 0px;
            transition: all 0.3s;
            transform: translateY(100%);
            &.active{
                transform: translateY(0);
            }
            >li{
                height: 45px;
                background-color: white;
                font-size: 12px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                &:not(:first-child){
                    border-top: 1px solid lightgray;
                }
                &:last-child{
                    margin-top: 3px;
                }
            }
        }
    }
</style>
